import React, {useState, useRef, ChangeEvent} from 'react'
import List from "@/components/list/list";
import {Switch, message} from "antd";
import {updateUserStatusApi} from '@/api/user'
import {IListComponentInstance} from '@/components/list/list'
import {MyButton, MyInput} from "@/components";

const UserManageList: React.FC = () => {
    const listRef = useRef<IListComponentInstance>(null)
    const [messageApi, contextHolder] = message.useMessage();
    const [headers] = useState<any[]>([
        {
            key: 'username',
            title: '账号',
            dataIndex: 'username',
        },
        {
            key: 'nickname',
            title: '姓名',
            dataIndex: 'nickname',
        },
        {
            key: 'roleName',
            title: '用户角色',
            dataIndex: 'roleName',
        },
        {
            key: 'status',
            title: '用户状态',
            dataIndex: 'status',
            render: (status: boolean, record: any) => {
                return <Switch value={status} onChange={() => {
                    updateUserStatusApi(record.id, !status).then(res => {
                        if (res.status === 0) {
                            listRef.current!.getTableList()
                            setTimeout(() => {
                                messageApi.success(res.msg)
                            }, 500)
                        } else {
                            messageApi.error(res.msg)
                        }
                    })
                }
                }></Switch>
            }
        },
        {
            key: 'createdTime',
            title: '创建时间',
            dataIndex: 'createdTime',
        },
        {
            key: 'updatedTime',
            title: '更新时间',
            dataIndex: 'updatedTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => {
                return <>
                    <MyButton text='编辑' ghost={true} onClick={() => {
                    }}></MyButton>
                    <MyButton text='编辑' onClick={() => {
                    }}></MyButton>
                    <MyButton text='删除' danger={true} onClick={() => {
                    }}></MyButton>
                </>
            }
        },
    ])

    let [searchParams, setSearchParams] = useState({
        username: '',
        roleName: '',
        endTime: '',
        startTime: ''
    })

    const [data, setData] = useState({
        searchUrl: '/user/list',
        isShowDrawer: false,
        currentUserId: 0,
        currentUserName: '',
        roleId: [],
        allRolesList: [],
        checkAll: false,
        indeterminate: true
    })

    const inputChange = (e: ChangeEvent<HTMLInputElement>, type: string) => {
        setSearchParams({...searchParams, [type]: e.target.value})
    }

    const resetClick = () => {
        let newSearchParams: any = {...searchParams}
        Object.keys(newSearchParams).forEach((key) => {
            newSearchParams[key] = ''
        })
        setSearchParams({...newSearchParams})
    }

    return <div className='userManageList'>
        {contextHolder}
        <List searchUrl={data.searchUrl} headers={headers} ref={listRef} params={searchParams} resetClick={resetClick}>
            <MyInput value={searchParams.username} label="账号" onChange={(e) => inputChange(e, 'username')}></MyInput>
            <MyInput value={searchParams.roleName} label="角色" onChange={(e) => inputChange(e, 'roleName')}></MyInput>
        </List>
    </div>
}
export default UserManageList
